<!-- DOM图片预加载 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <p id="loading">0%</p>
    <div id="box"></div>
    <script>
      //预加载：当需要图片时，且还未渲染，但是图片资源已加载完成备用
      var _load = document.getElementById("loading");
      var box = document.getElementById("box");
      //1、设置初始值
      var imgArr = [
        "../img/avatar.png",
        "../img/defaultInteriorBackgroundBanner.jpg",
        "../img/Logo.png",
        "../img/avatar.png",
        "../img/defaultInteriorBackgroundBanner.jpg",
      ];
      var num = 0; //进度条的初始值
      var newArr = []; //用来存放遍历好的img对象
      //2、加载图片
      function loadingImg() {
        //2-1、先遍历每一张图片对象
        for (var i = 0; i < imgArr.length; i++) {
          //2-2、创建一个image对象
          var image = new Image(); // 图片对象
          //2-3、img对象加载图片资源
          image.onload = function () {
            //2-4、把遍历出来的img对象插入到新的数组中
            newArr.push(this);
            //进度条
            num++;
            loadingPro(num);
          };
          //2-5、向img对象添加路径
          image.src = imgArr[i];
        }
      }
      //3、设置加载进度并且把ming对象放入道box中
      function loadingPro(index) {
        if (index == imgArr.length) {
          //3-1、把img对象插入道box中
          for (var i = 0; i < imgArr.length; i++) {
            //3-2、插入到box元素中
            box.appendChild(newArr[i]);
          }
        }
        _load.innerHTML = Math.ceil((index / imgArr.length) * 100) + "%";
      }
      //自调用
      loadingImg();
    </script>
  </body>
</html>
